<template>
  <view class="login-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration"></view>

    <!-- 登录卡片 -->
    <view class="login-card">
      <!-- 顶部区域 -->
      <view class="card-header">
        <view class="logo-container">
          <image
              class="profile-picture"
              mode="aspectFit"
              :src="src"
              @click="handleAvatarClick"
          ></image>
        </view>
        <text class="welcome-text">欢迎回来</text>
      </view>

      <!-- 表单区域 -->
      <view class="card-body">
        <!-- 用户名输入框 -->
        <view class="input-group">
          <view class="input-icon">
            <i class="fa fa-user"></i>
          </view>
          <input
              type="text"
              class="custom-input"
              :class="{ 'focused': usernameFocused }"
              placeholder="用户名"
              @focus="usernameFocused = true"
              @blur="usernameFocused = false"
              v-model="username"
          />
        </view>

        <!-- 密码输入框 -->
        <view class="input-group">
          <view class="input-icon">
            <i class="fa fa-lock"></i>
          </view>
          <input
              :type="passwordType"
              class="custom-input"
              :class="{ 'focused': passwordFocused }"
              placeholder="密码"
              @focus="passwordFocused = true"
              @blur="passwordFocused = false"
              v-model="password"
          />
          <view
              class="password-toggle"
              @click="togglePasswordVisibility"
          >
            <i :class="passwordVisible ? 'fa fa-eye' : 'fa fa-eye-slash'"></i>
          </view>
        </view>

        <!-- 记住密码选项 -->
        <view class="remember-me">
          <checkbox
              :checked="rememberMe"
              @change="toggleRememberMe"
              class="checkbox-custom"
          ></checkbox>
          <text>记住密码</text>
        </view>

        <!-- 登录按钮 -->
        <button
            class="login-button"
            :class="{ 'loading': isLoading }"
            @click="handleLogin"
            :disabled="isLoading"
        >
          <text v-if="!isLoading">登录</text>
          <text v-else>登录中...</text>
        </button>

        <!-- 注册/忘记密码 -->
        <view class="auth-links">
          <text @click="handleRegister">注册账号</text>
          <text @click="handleForgotPassword">忘记密码?</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      src: '/static/image/2.jpeg',
      username: '',
      password: '',
      passwordType: 'password',
      passwordVisible: false,
      rememberMe: false,
      usernameFocused: false,
      passwordFocused: false,
      isLoading: false
    };
  },
  onLoad() {
    // 页面加载时检查是否有记住的密码
    this.checkRememberedCredentials();
  },
  methods: {
    // 切换密码可见性
    togglePasswordVisibility() {
      this.passwordVisible = !this.passwordVisible;
      this.passwordType = this.passwordVisible ? 'text' : 'password';
    },

    // 切换记住密码选项
    toggleRememberMe() {
      this.rememberMe = !this.rememberMe;
    },

    // 处理登录逻辑
    handleLogin() {
      if (!this.username || !this.password) {
        uni.showToast({
          title: '用户名和密码不能为空',
          icon: 'none'
        });
        return;
      }

      // 显示加载状态
      this.isLoading = true;

      // 模拟登录请求
      setTimeout(() => {
        this.isLoading = false;

        // 登录成功处理
        if (this.rememberMe) {
          // 保存用户信息到本地存储
          uni.setStorage({
            key: 'rememberedUser',
            data: {
              username: this.username,
              password: this.password
            }
          });
        } else {
          // 清除本地存储的用户信息
          uni.removeStorage({
            key: 'rememberedUser'
          });
        }

        // 显示登录成功提示
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });

        // 跳转到首页或其他页面
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          });
        }, 1500);
      }, 1500);
    },

    // 检查是否有记住的密码
    checkRememberedCredentials() {
      uni.getStorage({
        key: 'rememberedUser',
        success: (res) => {
          if (res.data) {
            this.username = res.data.username;
            this.password = res.data.password;
            this.rememberMe = true;
          }
        },
        fail: (err) => {
          // 没有记住的密码，不做处理
        }
      });
    },

    // 处理头像点击事件
    handleAvatarClick() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.src = res.tempFilePaths[0];
          // 可以在这里添加上传头像的逻辑
        }
      });
    },

    // 处理注册和忘记密码事件
    handleRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      });
    },

    handleForgotPassword() {
      uni.navigateTo({
        url: '/pages/forgot-password/forgot-password'
      });
    }
  }
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
